require("../../../both/base.js")
require("./PersonList.scss")

var $ = jQuery

// 首页的课程列表
class PersonList extends React.Component{
    constructor(){
        super()

        this.state = {

            title : "前端开发推荐",

            coverImg : "/p_dist/images/main_web.png",

            desc : "零基础入门前端"
        }
    }

    render(){
        const courseLists = this.props.courses.map((e) => {
            return <li key={e.id}>
                <a href={`/user_video/${e.id}`}>
                    <img src={e.cover}/>
                    <div className="panel_content">
                        <div className="title">
                            {e.title}
                        </div>
                        <div className="desc">
                            {e.description}
                        </div>
                    </div>
                    <div className="panel_footer">
                        <div className="teacher">
                            {e.teacher}
                        </div>
                        <div className="starNum">
                            {e.starNum}个点赞
                        </div>
                    </div>
                </a>
            </li>
        })

        return (
            <div className="person_list_cr bln">
                <div className="list_title">
                    {this.props.title}
                </div>
                <div className="list_content_cr">
                    <a className="list_cover_img" href={this.props.href}>
                        <img className="lazy" src={this.props.coverImg}/>
                        <div className="list_intro">{this.props.desc}</div>
                    </a>
                    <ul className="course_lists">
                        {courseLists}
                    </ul>
                </div>
            </div>
        )
    }
}

export default PersonList